@import './transition.scss';
@import '@/theme/index.scss';

$layout-container-right: rgba(243, 252, 243, 0.58);

.layout-container {
    background-color: var(--system-container-main-background);
    width: calc(100% - 30px);
    height: calc(100% - 30px);
    margin: 15px;
    display: flex;
    flex-direction: row;
    overflow-y: auto;

    &-left {
        flex: 1;
        height: 100%;
        padding: 15px;
        overflow: auto;
    }

    &-right {
        width: 20%;
        height: 100%;
        display: flex;
        flex-direction: column;
        padding: 15px;

        .form-box {
            height: 50%;
            background: $layout-container-right;
            border: #c6d7ee 1px solid;
            padding: 10px;

            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-content: flex-end;

            button, .button {
                flex: 1;
                width: 100%;
            }

            .data-select {
                width: 100%;
                display: flex;
                gap: 8px;
                padding: 16px;
                position: relative;
                border: 2px solid #ccc;
                border-radius: 4px;

                &::before {
                    content: '数据选择';
                    position: absolute;
                    top: -8px;
                    left: 12px;
                    padding: 0 8px;
                    font-size: 12px;
                    color: #666;
                    background: white; /* 背景覆盖边框形成断开效果 */
                    z-index: 1;
                }
            }

            /* 原有样式保持不变 */
            overflow: auto; /* 建议用auto替代scroll，仅在需要时显示滚动条 */

            /* WebKit定制化滚动条 */
            &::-webkit-scrollbar {
                width: 3px; /* 窄条宽度 */
                height: 3px; /* 水平滚动条高度 */
                display: block; /* 覆盖之前的none */
                background-color: transparent; /* 轨道透明 */
            }

            &::-webkit-scrollbar-thumb {
                background: rgba(187, 210, 255, 0.5); /* 半透明蓝色滑块 */
                border-radius: 5px; /* 圆角 */
                transition: background 0.3s; /* 悬停动画 */

                &:hover {
                    background: rgba(100, 149, 237, 0.8); /* 悬停时加深 */
                    cursor: pointer;
                }
            }

            &::-webkit-scrollbar-track {
                background: rgba(240, 240, 240, 0.3); /* 极浅灰色轨道 */
                margin: 2px 0; /* 上下留白 */
            }
        }

        .info-box {
            height: 50%;
            background: $layout-container-right;
            border: #c6d7ee 1px solid;
            padding: 10px;

            text-align: left;

            h5 {
                font-size: 15px;
                color: #1e4150;
                margin-bottom: 10px;
            }

            p {
                font-size: 13px;
                color: #45a683;
                margin-bottom: 5px;
            }

            ol, ul {
                font-size: 12px;
                color: #6994bd;
                padding-left: 20px;
                margin-bottom: 5px;
            }

            /* 原有样式保持不变 */
            overflow: auto; /* 建议用auto替代scroll，仅在需要时显示滚动条 */

            /* WebKit定制化滚动条 */
            &::-webkit-scrollbar {
                width: 3px; /* 窄条宽度 */
                height: 3px; /* 水平滚动条高度 */
                display: block; /* 覆盖之前的none */
                background-color: transparent; /* 轨道透明 */
            }

            &::-webkit-scrollbar-thumb {
                background: rgba(187, 210, 255, 0.5); /* 半透明蓝色滑块 */
                border-radius: 5px; /* 圆角 */
                transition: background 0.3s; /* 悬停动画 */

                &:hover {
                    background: rgba(100, 149, 237, 0.8); /* 悬停时加深 */
                    cursor: pointer;
                }
            }

            &::-webkit-scrollbar-track {
                background: rgba(240, 240, 240, 0.3); /* 极浅灰色轨道 */
                margin: 2px 0; /* 上下留白 */
            }
        }
    }
}

.flex-box {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 15px;
    box-sizing: border-box;
}

.flex {
    display: flex;
}

.center {
    justify-content: center;
    align-items: center;
    text-align: center;
}

a {
    text-decoration: none;
}

/** element-plus **/
.el-icon {
    text-align: center;
}

/** 用于提示信息 **/
.my-tip {
    background-color: #f1f1f1;
    padding: 5px 10px;
    text-align: left;
    border-radius: 4px;
}

.system-scrollbar {
    &::-webkit-scrollbar {
        display: none;
        width: 6px;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: rgba(144, 147, 153, 0.3);
    }

    &:hover {
        &::-webkit-scrollbar {
            display: block;
        }

        &::-webkit-scrollbar-thumb {
            border-radius: 10px;
            background: rgba(144, 147, 153, 0.3);

            &:hover {
                background: rgba(144, 147, 153, 0.5);
            }
        }
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
